<template>
	<div class="news-list-container">
		<div class="search-container">
			<input v-model="searchKeyword" type="text" placeholder="请输入搜索关键词" class="search-input" />
			<button @click="searchNews" class="search-button">搜索</button>
		</div>
		<ul class="news-items">
			<li v-for="news in filteredNewsList" :key="news.id" class="news-item">
				<h2 class="news-title">{{ news.title }}</h2>
				<p class="news-summary">{{ news.summary }}</p>
				<div class="news-meta">
					<span class="news-source">来源: {{ news.source }}</span>
					<span class="news-date">发布时间: {{ news.publishDate }}</span>
				</div>
				<router-link :to="{ name: 'newsDetail', params: { id: news.id } }"
					class="read-more-link">查看详情</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				newsList: [{
						id: 1,
						title: "全球首款声控投影触控智能手机发布",
						summary: "创新企业推出全球首款声控投影触控智能手机，突破屏幕限制，实现墙面投影操控，重塑移动交互体验。",
						source: "通信技术导报",
						publishDate: "2025-05-01"
					},
					{
						id: 2,
						title: "首款生物识别加密防护智能手机问世",
						summary: "科技团队研发出首款生物识别加密防护智能手机，集成多种生物认证技术，为用户数据安全构筑坚固防线。",
						source: "信息安全时报",
						publishDate: "2025-05-02"
					},
					{
						id: 3,
						title: "全球首款液态散热系统智能手机亮相",
						summary: "知名品牌推出全球首款液态散热系统智能手机，有效解决高负荷运行发热问题，保障性能持续稳定输出。",
						source: "手机评测周刊",
						publishDate: "2025-05-03"
					},
					{
						id: 4,
						title: "具备自修复屏幕功能的智能手机发布",
						summary: "科研机构联合企业推出具备自修复屏幕功能的智能手机，轻微划痕自动修复，延长屏幕使用寿命。",
						source: "材料科学前沿",
						publishDate: "2025-05-04"
					},
					{
						id: 5,
						title: "首款支持脑电波情绪识别的智能手机面市",
						summary: "科技公司推出首款支持脑电波情绪识别的智能手机，通过分析用户情绪提供个性化服务，开启智能交互新维度。",
						source: "智能生活杂志",
						publishDate: "2025-05-05"
					},
					{
						id: 6,
						title: "搭载空间定位全息导航的智能手机震撼登场",
						summary: "创新品牌推出搭载空间定位全息导航的智能手机，将导航信息以全息形式呈现，带来更直观精准的导航体验。",
						source: "交通科技资讯",
						publishDate: "2025-05-06"
					}
				],
				searchKeyword: "",
			};
		},
		computed: {
			filteredNewsList() {
				if (this.searchKeyword === "") {
					return this.newsList;
				}
				return this.newsList.filter(news => {
					return news.title.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
						news.summary.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
						news.source.toLowerCase().includes(this.searchKeyword.toLowerCase());
				});
			}
		},
		methods: {
			searchNews() {
				// 这里可以添加一些验证逻辑，比如判断搜索关键词是否为空等
				// 目前只是触发计算属性重新计算，以更新过滤后的新闻列表
			}
		}
	};
</script>

<style scoped>
	.news-list-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
	}

	.search-container {
		display: flex;
		margin-bottom: 20px;
	}

	.search-input {
		flex: 1;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 3px;
	}

	.search-button {
		padding: 8px 15px;
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 3px;
		cursor: pointer;
	}

	.news-list-title {
		font-size: 28px;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
	}

	.news-items {
		padding: 0;
	}

	.news-item {
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		padding: 20px;
		margin-bottom: 20px;
		background-color: #fff;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.news-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.news-title {
		font-size: 20px;
		margin-bottom: 10px;
		color: #007bff;
	}

	.news-summary {
		font-size: 16px;
		color: #666;
		margin-bottom: 15px;
	}

	.news-meta {
		font-size: 14px;
		color: #666;
		margin-bottom: 15px;
	}

	.news-source {
		margin-right: 20px;
	}

	.read-more-link {
		display: inline-block;
		padding: 8px 15px;
		background-color: #007bff;
		color: #fff;
		text-decoration: none;
		border-radius: 3px;
		transition: background-color 0.3s ease;
	}

	.read-more-link:hover {
		background-color: #0056b3;
	}
</style>